<div class="weui-tab">
  <weui-navbar>
    <weui-navbar-item>
        隐患报告详情
      <button *ngIf="isModifiable" style="font-size: 1.4rem" type="button" class="btn btn-sm btn-success pull-right mr-2" (click)="saveReport()">保存</button>
    </weui-navbar-item>
  </weui-navbar>


  <div class="weui-tab__panel">

    <div class="card mt-3">
      <div class="card-header text-primary" style="display: inline-block">
        <h3>隐患报告 <span class="pull-right">{{riskSubCategory?.category?.name}} / {{riskSubCategory?.name}}</span></h3>
      </div>

      <div class="card-body p-3">
        <!--显示隐患内容-->
        <div class="list-group mt-3" *ngIf="!isModifiable; else edit_content">
          <!--新添加显示信息 2018-09-30 begin-->
          <li class="list-group-item flex-column align-items-start">
            <span class="pull-left">排查日期</span> <span class="pull-right">{{reportInfo.foundDate | date: 'y/MM/dd'}}</span>
          </li>

          <li class="list-group-item flex-column align-items-start">
            <span class="pull-left">隐患来源</span> <span class="pull-right">{{reportInfo.riskCause?.name}}</span>
          </li>

          <!--新添加显示信息 2018-09-30 end-->

          <li class="list-group-item flex-column align-items-start">
            <span class="pull-left">部门/部位</span> <span class="pull-right">{{reportInfo.location}}</span>
          </li>
          <li class="list-group-item flex-column align-items-start">
            <span class="pull-left">地点</span> <span class="pull-right">{{reportInfo.place}}</span>
          </li>
          <li class="list-group-item flex-column align-items-start">
            <span class="pull-left">法律法规</span> <span class="pull-right" *ngFor="let lawLibrary of reportInfo?.lawLibraries">《{{lawLibrary?.name}}》</span>
          </li>

          <h4 class="text-warning mt-3">
            隐患
          </h4>
          <!--[ {{commonIssue.criticalLevel | criticalLevel}} ]-->
          <ul class="list-group">
            <li class="list-group-item list-group-item-warning" *ngFor="let commonIssue of riskSubCategory?.commonIssues">
              <span class="pull-left">{{commonIssue.name}}  </span>
              <span class="pull-right">
                <input type="checkbox" name="commonIssueCheck" class="form-check-input" style="width: 15px; height: 15px" autocomplete="off" data-md-icheck [(ngModel)]="checkFlag[commonIssue.name]" disabled>
              </span>
            </li>
          </ul>

          <!--<li class="list-group-item flex-column align-items-start">-->
            <!--<span class="pull-left">隐患大类</span> <span class="pull-right">{{riskSubCategory?.category?.name}}</span>-->
          <!--</li>-->

          <!--<li class="list-group-item flex-column align-items-start">-->
            <!--<span class="pull-left">隐患分级</span> <span class="pull-right">{{reportInfo.riskLevel?.name}}</span>-->
          <!--</li>-->

          <a href="javascript:void(0);" class="list-group-item list-group-item-danger flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h4 class="mb-1">隐患描述</h4>
            </div>
            <p class="mb-1">{{reportInfo.description}}</p>
          </a>
          <a href="javascript:void(0);" class="list-group-item list-group-item-success flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h4 class="mb-1">整改要求</h4>
            </div>
            <p class="mb-1" *ngFor="let commonIssue of reportInfo.riskCommonIssue">{{commonIssue.request}}</p>
          </a>

          <section *ngIf="riskImages.length > 0" class="mt-3">
            <h4 class="text-secondary">隐患图片</h4>
            <img *ngFor="let image of riskImages" class="m-1" (click)="previewRiskImage(image)" [src]="image" style="width: 75px; height: 75px">
          </section>

          <!--<a href="javascript:void(0);" class="list-group-item flex-column align-items-start">-->
            <!--<div class="d-flex w-100 justify-content-between">-->
              <!--<h4 class="mb-1">备注</h4>-->
            <!--</div>-->
            <!--<p class="mb-1">{{reportInfo.comment}}</p>-->
          <!--</a>-->

        </div>

        <!--更新隐患内容-->
        <ng-template #edit_content>
          <form *ngIf="isModifiable" class="mt-3 form-horizontal">

            <weui-items class="mt-0" style="font-size: 1.5rem">

              <!--<weui-input type="text" name="location" placeholder="请输入部门/部位" class="text-right pl-0" style="text-align: right"-->
                          <!--[(ngModel)]="reportInfo.location" [required]="true">-->
                <!--<label class="weui-label mb-0" style="text-align: left">部门/部位</label>-->
              <!--</weui-input>-->

              <!--<div class="form-group row">-->
                <!--<label for="locationInput" class="col-sm-2 col-form-label text-warning">部门/部位</label>-->
                <!--<div class="col-sm-10">-->
                  <!--<input type="text" class="form-control text-dark" style="text-align: right; font-size: 1.5rem" id="locationInput" name="location" placeholder="请输入部门/部位" [(ngModel)]="reportInfo.location">-->
                <!--</div>-->
              <!--</div>-->
              <weui-link href="javascript:void(0);" class="pl-0 pr-0" style="text-decoration: none; font-size:1.5rem" baseCls="link" [noPushArrow]="true" (click)="showDatePicker()">
                <p weui-content class="mb-0 text-warning">排查日期</p>
                <div weui-last class="mb-0 pr-0 text-dark">{{reportInfo?.foundDate | date: 'y/MM/dd'}}</div>
              </weui-link>

              <weui-link href="javascript:void(0);" class="pl-0 pr-0" style="text-decoration: none; font-size:1.5rem" baseCls="link" [noPushArrow]="true" (click)="popRiskCause()">
                <p weui-content class="mb-0 text-warning">隐患来源</p>
                <div weui-last class="mb-0 pr-0 text-dark">{{reportInfo?.riskCause?.name}}</div>
              </weui-link>

              <weui-item style="text-decoration: none; font-size:1.5rem" class="pl-0">
                <p weui-content class="mb-0 text-warning" (click)="popLocations()" >部门/部位</p>
                <div weui-last class="mb-0 pr-0 text-dark">
                  <input type="text" class="text-dark" style="text-align: right; font-size: 1.5rem; border: hidden" name="location" placeholder="请输入部门/部位" [(ngModel)]="reportInfo.location">
                </div>
              </weui-item>

              <weui-item style="text-decoration: none; font-size:1.5rem" class="pl-0">
                <p weui-content class="mb-0 text-warning" >地点</p>
                <div weui-last class="mb-0 pr-0 text-dark">
                  <input type="text" class="text-dark" style="text-align: right; font-size: 1.5rem; border: hidden" name="place" placeholder="请输入地点" [(ngModel)]="reportInfo.place">
                </div>
              </weui-item>

              <weui-link href="javascript:void(0);" class="pl-0 pr-0" style="text-decoration: none; font-size:1.5rem" baseCls="link" [noPushArrow]="true" (click)="popLaw()">
                <p weui-content class="mb-0 text-warning">法律法规</p>
                <div weui-last class="mb-0 pr-0 text-dark"*ngFor="let lawLibrary of reportInfo?.lawLibraries" >《{{lawLibrary?.name}}》</div>
              </weui-link>

            </weui-items>

            <h4 class="text-warning mt-3">
              隐患
            </h4>
            <!--[ {{commonIssue.criticalLevel | criticalLevel}} ]-->
            <ul class="list-group">
              <li class="list-group-item list-group-item-warning" *ngFor="let commonIssue of riskSubCategory?.commonIssues">
                <span class="pull-left">{{commonIssue.name}}  </span>
                <span class="pull-right">
                  <input type="checkbox" name="commonIssueItem" class="form-check-input" style="width: 15px; height: 15px" autocomplete="off" data-md-icheck [checked]="checkFlag[commonIssue.name]"
                         (change)="addCommonIssue($event, commonIssue)">
                </span>
              </li>
            </ul>

            <section *ngIf="riskImages.length > 0" class="mt-3">
              <h4 class="text-secondary">隐患图片</h4>
              <img *ngFor="let image of riskImages" class="m-1" (click)="previewRiskImage(image)" [src]="image" style="width: 75px; height: 75px">
              <!--<ks-modal-gallery [modalImages]="images"-->
              <!--[plainGalleryConfig]="plainGalleryGrid"></ks-modal-gallery>-->
            </section>

            <app-image-uploader class="p-4" #uploader *ngIf="isModifiable" (fileChange)="fileChange($event)"></app-image-uploader>

            <div class="form-group mt-3">
              <label for="description" class="text-danger"><h4>隐患描述</h4></label>
              <textarea class="form-control" id="description" style="font-size: 1.5rem" name="description" rows="5" placeholder="请填写隐患描述" [(ngModel)]="reportInfo.description"></textarea>
            </div>
            <!--<div class="form-group">-->
              <!--<label for="request" class="text-primary"><h4><i class="fa fa-thumb-tack"></i> 整改要求</h4></label>-->
              <!--<textarea class="form-control" id="request" style="font-size: 1.5rem" name="request" rows="5" placeholder="请填写整改要求" [(ngModel)]="request"></textarea>-->
            <!--</div>-->
            <!--<div class="form-group">-->
              <!--<label for="comments" class="text-primary"><h4>备注</h4></label>-->
              <!--<textarea class="form-control" id="comments" style="font-size: 1.5rem" name="comments" rows="5" placeholder="请填写备注" [(ngModel)]="reportInfo.comment"></textarea>-->
            <!--</div>-->

          </form>
        </ng-template>

      </div>
    </div>

    <div class="card mt-5" *ngIf="reportInfo?.riskSolution && reportInfo?.riskSolution?.status === 'finished'">
      <div class="card-header text-primary">
        <h3>整改报告</h3>
      </div>
      <div class="card-body p-3">
        <ul class="list-group">
          <li class="list-group-item"><span class="pull-left">整改完成日期</span> <span class="pull-right">{{reportInfo.riskSolution?.finishDate | date: 'y/MM/dd'}}</span></li>
          <li class="list-group-item"><span class="pull-left">投入资金（元）</span> <span class="pull-right">{{reportInfo.riskSolution?.cost}}</span></li>
          <li class="list-group-item"><span class="pull-left">整改责任人</span> <span class="pull-right">{{reportInfo.riskSolution?.taskOwner}}</span></li>
          <li class="list-group-item"><span class="pull-left">验收复查责任人</span> <span class="pull-right">{{reportInfo.riskSolution?.reviewOwner}}</span></li>
          <a href="javascript:void(0);" class="list-group-item list-group-item-success flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h4 class="mb-1">整改情况</h4>
            </div>
            <app-rich-text [contentsText]="reportInfo?.riskSolution?.comment"></app-rich-text>
          </a>
        </ul>

        <section *ngIf="fixImages.length > 0" class="mt-3">
          <h4 class="text-secondary">整改图片</h4>
          <img *ngFor="let image of fixImages" class="m-1" (click)="previewFixImage(image)" [src]="image" style="width: 75px; height: 75px">
        </section>
      </div>

    </div>

    <weui-date-picker #datePicker></weui-date-picker>
    <weui-toast #successToast status="success"></weui-toast>

    <weui-picker #pickerLaw></weui-picker>
    <weui-picker #pickerLevel></weui-picker>
    <weui-picker #pickerType></weui-picker>
    <weui-picker #pickerLocation></weui-picker>
    <weui-picker #pickerCause></weui-picker>

  </div>
</div>


